<template>
  <div class="setter-wrap">
    <el-button type="primary" class="save-button" @click="handleSubmit">保存</el-button>
    <el-divider></el-divider>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="业务模块" prop="module">
        <el-select v-model="form.module" placeholder="请选择业务模块" @change="changeModule">
          <el-option
              v-for="item in moduleList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <div>
      <el-row>
        <el-col :span="24">
          <el-link type="primary" :underline="false" class="add-button" @click="addCustom">
            <i class="el-icon-circle-plus-outline"></i>
            添加更新条件
          </el-link>
        </el-col>
      </el-row>
      <el-table :data="tableData" :border="true"  style="width: 100%">
        <el-table-column label="条件参数" prop="conditionParam">
          <template slot-scope="scope">
            <el-select v-model="scope.row.conditionParam" placeholder="请选择条件参数">
              <el-option
                  v-for="item in paramList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="表达式" prop="expression">
          <template slot-scope="scope">
            <el-select v-model="scope.row.expression" placeholder="请选择" size="medium" @change="changeExpression(scope.row)">
              <el-option v-for="item in logicJudgeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="入参参数" prop="requestParam">
          <template slot-scope="scope">
            <el-select v-model="scope.row.requestParam" placeholder="请选择入参参数">
              <el-option
                  v-for="item in selectList"
                  :key="item.option"
                  :label="item.option"
                  :value="item.option">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <el-divider></el-divider>
    </div>

    <div>
      <el-row>
        <el-col :span="24" style="font-size: 14px">
          <el-link type="primary" :underline="false" class="add-button" >
            字段配置
          </el-link>
        </el-col>
      </el-row>
      <el-table :data="entityData" :border="true"  style="width: 100%">
        <el-table-column label="名称/编码" prop="showTxt" />
        <el-table-column label="入参参数" prop="targetValue">
          <template slot-scope="scope">
            <el-select v-model="scope.row.targetValue" clearable placeholder="请选择入参参数">
              <el-option
                  v-for="item in selectList"
                  :key="item.value"
                  :label="item.option"
                  :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {saveOrUpdate, getByBelongNodeId} from '@/api/singleOperateConfig'
import {getByArrangeId} from '@/api/compilationInParameter'
import {constantData} from '@/mock/constant'

export default {
  props: {
    lf: Object,
    context: Object,
    current: Object,
    currentData: Object,
    value: [String, Number, Boolean, Object, Array]
  },
  data() {
    return {
      logicJudgeList: constantData.logicJudgeList,
      moduleList: constantData.moduleList,
      paramList: [],
      selectList: [],
      tableData: [],
      entityData: [],
      compilationInParameter: {},
      form: {
        operateType: 'edit'
      }
    }
  },

  mounted() {
    this.getCompilationInParameter();
    this.getData();
  },

  methods: {
    handleSubmit() {
      this.form.arrangeId = window.localStorage.getItem('arrangeId');
      this.form.belongNodeId = this.currentData.id;
      this.form.conditionList = this.tableData;
      this.form.entityFieldList = this.entityData;
      this.form.operateType = 'edit';
      saveOrUpdate(this.form).then(res =>{
        if (res.code === '0') {
          this.$message.success('保存成功');
        } else {
          this.$message.error('保存失败');
        }
      });
    },

    getCompilationInParameter() {
      getByArrangeId(window.localStorage.getItem('arrangeId')).then(res => {
        if (res.code === '0') {
          this.compilationInParameter = res.data
          const list = res.data.requestParameterList.map(item => {
            return {option: item.name + '/' + item.code, value: item.code}
          })
          this.selectList = list
        }
      })
    },

    getData() {
      getByBelongNodeId(this.currentData.id).then(res => {
        if (res.code === '0') {
          this.form.module = res.data.module;
          this.form.operateType = res.data.operateType;
          this.tableData = res.data.conditionList;
          this.entityData = res.data.entityFieldList;
        }
      })
    },

    changeExpression(row) {
      if (row.expression === 'isNull' || row.expression === 'isNotNull') {
        row.visible = false;
        row.compareValue = '';
      } else {
        row.visible = true;
      }
    },

    changeModule(val) {
      constantData.moduleList.forEach(
        (item) => {
          if (item.value === val) {
              this.paramList = item.properties
          }
        }
      )
      const reList = this.paramList.map(item => {
        return {
          entityName: item.value,
          label: item.label,
          showTxt: item.label + '/' + item.value,
          targetValue: '',
        }
      })
      this.entityData = reList;
    },

    addCustom() {
      const item = {
        conditionParam: '',
        expression: '',
        requestParam: '',
      }
      this.tableData.push(item)
    }
  }
}
</script>

<style scoped lang="less">
.setter-wrap {
  background: #f3f6fa;
  border-radius: 4px;
  font-size: 12px;
  color: #303a51;
  line-height: 16px;
  font-weight: 400;
  padding: 9px 12px;
}
.label {
  margin-right: 10px;
}
.input {
  width: 90%;
}
.tip {
  color: #a0a1a5;
  margin-top: 8px;
}
.add-button {
  margin-top: 10px;
}
.save-button {
  margin-left: 85%;
}
.el-row {
  height: 35px;
  background-color: #ffffff;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
